<template>
    <div>
        <el-card style="width: 100%; height: 10vh;">
            <el-row>
                <el-col :span="20">
                    <el-input clearable v-model="searchCondition"
                              placeholder="在这里搜索商品"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button style="margin-left: 50px;width: 100px" type="primary" @click="selectByCondition"
                               plain> 搜 索
                    </el-button>
                </el-col>
            </el-row>
        </el-card>


        <el-card>

            <div slot="header" class="clearfix">
                <span style="font-weight: bold;font-size:22px">为你推荐</span>
                <span style="font-size:15px;float: right;color: #2d8cf0;margin-top: 5px" @click="getRandomProducts">不喜欢？换一换</span>
            </div>

            <el-row :gutter="20" class="el-row">
                <el-col :span="6" style="margin-bottom: 20px" v-for="(product,index) in products"
                        :key="index">
                    <el-card style="height: 250px;">
                        <div style="display: flex;flex-direction: row" @click="toProductInfo(product.id)">
                            <div style="flex:1;text-align: center">
                                <el-image style="width: 120px;height: 120px" fit="fit"
                                          :src="product.image"></el-image>
                            </div>
                            <div style="flex:1;flex-direction: column">
                                <div class="my-over-hidden"
                                     style="flex:2;text-align: center;font-size: 15px;width: 150px">{{
                                    product.name
                                    }}
                                </div>
                                <div style="flex:1;text-align: center;font-size: 20px;margin: 10px;color: #ff3e00">
                                    ￥{{
                                    product.price
                                    }}
                                </div>
                                <div class="my-over-hidden"
                                     style="flex:3;text-align: center;font-size: 15px;width: 150px;color: #99a9bf">{{
                                    product.detail
                                    }}
                                </div>

                            </div>

                        </div>
                        <div style="margin-bottom: 1px">
                            <el-divider></el-divider>
                            <el-link style="float: right" type="primary" @click="toProductInfo(product.id)">>查看详情
                            </el-link>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-pagination
                    style="float: right;margin-bottom: 10px"
                    background
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange"
                    :total="total">
            </el-pagination>
        </el-card>


    </div>
</template>
<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "Search",
    data() {
        return {
            products: [
                {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                }, {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 2,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 3,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 2,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 3,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                }, {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 2,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 3,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                }, {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 2,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 3,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                }, {
                    id: 1,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 2,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
                {
                    id: 3,
                    name: '华为 HUAWEI P60 Pro',
                    image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    detail: '华为 HUAWEI P60 Pro',
                    detail_img: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/mate40-white.png',
                    price: '2323',
                },
            ],
            searchCondition: '',

            currentPage: 1,         // 当前页码
            pageSize: 12,            // 每页显示条数
            total: 25,               // 用户总数
        }
    },
    mounted() {
        this.getRandomProducts()
    },
    methods: {

        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;
            // 发送请求获取相应数量的数据
            this.selectByCondition()
        },

        selectByCondition() {
            // 如果搜索条件为空则不执行
            if (this.searchCondition === '') {
                this.$message.info('请输入搜索条件')
                return;
            }
            // 发送请求获取数据
            this.$request.post('/product/selectByCondition' + '?currentPage=' + this.currentPage
                + '&pageSize=' + this.pageSize
                + '&condition=' + this.searchCondition).then(res => {
                console.log(res)
                if (res.code === '200') {
                    this.products = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
            })

        },

        // 获取随即商品
        getRandomProducts() {
            // 清空条件
            this.searchCondition = ''

            this.$request.get('/product/getRandomProducts' + '?size=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.products = res.data
                    this.total = this.products.length
                } else {
                    this.$message.error(res.msg)
                }
            })

        },
        toProductInfo(id) {
            this.$router.push('/productInfo?id=' + id)
        },

    }
})
</script>


<style scoped>
.my-over-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>